import React, { useState } from 'react';
import { 
  LayoutDashboard, Database, FileCheck, BarChart3, 
  Settings, Bell, User, Search, Menu, X
} from 'lucide-react';

// 导入子组件
import Dashboard from './components/Dashboard.jsx';
import DataEntry from './components/DataEntry.jsx';
import ApprovalFlow from './components/ApprovalFlow.jsx';
import Reports from './components/Reports.jsx';
import UserManagement from './components/UserManagement.jsx';
import SystemSettings from './components/SystemSettings.jsx';

const WorkbenchPrototype = ({ onNavigate }) => {
  const [currentPage, setCurrentPage] = useState('dashboard');
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [userMenuOpen, setUserMenuOpen] = useState(false);

  // 菜单配置
  const menuItems = [
    {
      id: 'dashboard',
      name: '仪表盘',
      icon: LayoutDashboard,
      description: '实时监控和关键指标概览'
    },
    {
      id: 'data-entry',
      name: '数据录入',
      icon: Database,
      description: '录入和管理ESG数据'
    },
    {
      id: 'approval',
      name: '审批流程',
      icon: FileCheck,
      description: '数据审核和审批管理'
    },
    {
      id: 'reports',
      name: '报告管理',
      icon: BarChart3,
      description: '生成和管理各类报告'
    },
    {
      id: 'users',
      name: '用户管理',
      icon: User,
      description: '用户和权限管理'
    },
    {
      id: 'settings',
      name: '系统设置',
      icon: Settings,
      description: '系统配置和参数设置'
    }
  ];

  // 模拟用户信息
  const currentUser = {
    name: '张明',
    role: 'ESG经理',
    avatar: null,
    notifications: 5
  };

  // 渲染当前页面组件
  const renderCurrentPage = () => {
    switch (currentPage) {
      case 'dashboard':
        return <Dashboard />;
      case 'data-entry':
        return <DataEntry />;
      case 'approval':
        return <ApprovalFlow />;
      case 'reports':
        return <Reports />;
      case 'users':
        return <UserManagement />;
      case 'settings':
        return <SystemSettings />;
      default:
        return <Dashboard />;
    }
  };

  return (
    <div className="min-h-screen flex">
      {/* 侧边栏 */}
      <div className={`${sidebarOpen ? 'w-64' : 'w-16'} bg-white shadow-lg transition-all duration-300 flex flex-col hidden md:flex`}>
        {/* Logo区域 */}
        <div className="h-16 flex items-center justify-between px-4 border-b border-gray-200">
          {sidebarOpen && (
            <div className="flex items-center space-x-2">
              <LayoutDashboard className="h-8 w-8 text-purple-600" />
              <span className="text-xl font-bold text-gray-900">ESG工作台</span>
            </div>
          )}
          <button
            onClick={() => setSidebarOpen(!sidebarOpen)}
            className="p-2 rounded-lg hover:bg-gray-100"
          >
            {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </div>

        {/* 导航菜单 */}
        <nav className="flex-1 px-4 py-6 space-y-2">
          {menuItems.map((item) => {
            const Icon = item.icon;
            const isActive = currentPage === item.id;
            
            return (
              <button
                key={item.id}
                onClick={() => setCurrentPage(item.id)}
                className={`w-full flex items-center px-3 py-3 text-left rounded-lg transition-all duration-200 ${
                  isActive
                    ? 'bg-purple-100 text-purple-600 border border-purple-200'
                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                }`}
              >
                <Icon className={`h-5 w-5 ${sidebarOpen ? 'mr-3' : 'mx-auto'}`} />
                {sidebarOpen && (
                  <div>
                    <div className="font-medium">{item.name}</div>
                    <div className="text-xs text-gray-500 mt-1">{item.description}</div>
                  </div>
                )}
              </button>
            );
          })}
        </nav>

        {/* 底部用户信息 */}
        <div className="p-4 border-t border-gray-200">
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
              <span className="text-white text-sm font-medium">
                {currentUser.name.charAt(0)}
              </span>
            </div>
            {sidebarOpen && (
              <div>
                <div className="text-sm font-medium text-gray-900">{currentUser.name}</div>
                <div className="text-xs text-gray-500">{currentUser.role}</div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 flex flex-col min-h-screen bg-gray-50">
        {/* 页面内容 */}
        <main className="flex-1 overflow-auto">
          {renderCurrentPage()}
        </main>
      </div>

      {/* 移动端侧边栏覆盖层 */}
      <div className={`fixed inset-0 bg-black bg-opacity-50 z-50 md:hidden transition-opacity ${sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
        <div className={`w-64 bg-white h-full shadow-lg transform transition-transform ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
          {/* 移动端侧边栏内容 */}
          <div className="h-16 flex items-center justify-between px-4 border-b border-gray-200">
            <div className="flex items-center space-x-2">
              <LayoutDashboard className="h-8 w-8 text-purple-600" />
              <span className="text-xl font-bold text-gray-900">ESG工作台</span>
            </div>
            <button
              onClick={() => setSidebarOpen(false)}
              className="p-2 rounded-lg hover:bg-gray-100"
            >
              <X className="h-5 w-5" />
            </button>
          </div>
          
          <nav className="px-4 py-6 space-y-2">
            {menuItems.map((item) => {
              const Icon = item.icon;
              const isActive = currentPage === item.id;
              
              return (
                <button
                  key={item.id}
                  onClick={() => {
                    setCurrentPage(item.id);
                    setSidebarOpen(false);
                  }}
                  className={`w-full flex items-center px-3 py-3 text-left rounded-lg transition-all duration-200 ${
                    isActive
                      ? 'bg-purple-100 text-purple-600 border border-purple-200'
                      : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                  }`}
                >
                  <Icon className="h-5 w-5 mr-3" />
                  <div>
                    <div className="font-medium">{item.name}</div>
                    <div className="text-xs text-gray-500 mt-1">{item.description}</div>
                  </div>
                </button>
              );
            })}
          </nav>
        </div>
      </div>

      {/* 移动端顶部栏 */}
      <div className="md:hidden bg-white shadow-sm border-b border-gray-200 px-4 py-3 flex items-center justify-between">
        <button
          onClick={() => setSidebarOpen(true)}
          className="p-2 rounded-lg hover:bg-gray-100"
        >
          <Menu className="h-5 w-5" />
        </button>
        <h1 className="text-lg font-bold text-gray-900">ESG工作台</h1>
        <div className="w-8"></div> {/* 占位符保持居中 */}
      </div>
    </div>
  );
};

export default WorkbenchPrototype; 